<template>
	<view class="from-box">
		<view :class="titleType == 'solid' ? 'solid-title' : 'dotted-title'">{{label}}</view>
		<view class="form-detail"  v-if="!isSlot" @click="send">
			<view v-show="avtive" @touchstart="clean">
				<!-- <u-icon name="close-circle" color="rgb(97,97,97)" size="36"></u-icon> -->
			</view>
			<u-icon :name="rightIcon" style="margin-left: 12upx;" color="#999999" size="28"/>
			<textarea 
			 :value="defaultValue"
			 @input="$emit('input',$event.target.value),avtive = value == '' ? false : true" 
			 @focus="avtive = value == '' ? false : true" @blur="avtive = false " 
			 type="textarea" 
			 input-align="right" 
			 auto-height="true" 
			 placeholder-style="font-weight:200;color:#DDDDDD"
			 style="text-align:right"
			 :placeholder=" disabled ? '' : placeholder"
			 :disabled="disabled"
			  />			 
		</view>
		<!-- 使用插槽注意产生样式冲突 -->
		<view class="form-detail"  v-if="isSlot"> 
			<template>
				<slot name="{{slotName}}"></slot>
			</template>			
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			value:{type:String/null,default:''},
			label:String,
			placeholder:{type:String,default:'请输入内容'},
			disabled:{type:Boolean,default:false},
			titleType:{type:String,default:'solid'},
			rightIcon:{type:String/null,default:''},
			slotName:{type:String/null,default:'default'},
			isSlot:{type:Boolean,default:false}
		},
		computed:{
			defaultValue(){
				return this.disabled ? this.$utils.eliminate(this.value) : this.value
			}
		},
		data(){
			return {
				avtive:false
			}
		},		
		methods:{
			clean(){	
				this.$emit('input',"")
				this.$forceUpdate()
			    this.avtive = false 
			},
			send(){
				this.$emit('rightClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.from-box{
		width: 100%;
		min-height: 80upx;
		display: flex;
		flex: row;
		justify-content: space-between;
		align-items:center;
		padding-left: 16upx ;
		padding-right: 16upx ;
		border-bottom:2upx solid rgb(217,217,217) ;
		.solid-title{
			font-size: 28upx;
			font-family:auto;
			font-weight: bold;
			color: rgb(51,51,51);
		}
		.dotted-title{
			font-size: 28upx;
			font-family:auto;
			font-weight: normal;
			color: #666666;
		}
		.form-detail{
			width:60%;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			white-space:normal; 
			word-break:break-all;
			overflow: hidden;
			font-size: 28upx;
			font-family:auto;
			font-weight: normal;
			color: #000;
		}
	}
</style>
